<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="action-app-codemirror">
    <codemirror :value="value" :options="cmOptions" @input="onCmCodeChange"/>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/dracula'
import 'codemirror/theme/cobalt.css';  
import 'codemirror/addon/selection/active-line.js';
import 'codemirror/addon/display/autorefresh';
import 'codemirror/mode/clike/clike'
import 'codemirror/theme/ambiance.css';

export default {
  components: {
    codemirror
  },
  props: {
    value: {
      type: String,
      default: ()=> ''
    }
  },
  data() {
    return {
      code: '',
      cmOptions: {
        tabSize: 4,
        mode: 'text/x-java',
        theme: 'dracula',
        lineNumbers: true,
        line: true,
        highlightDifferences: true
      }
    }
  },
  methods: {
    onCmCodeChange(v) {
      this.$emit('update:value', v)
    }
  }
}
</script>

<style lang="scss" scoped>
.action-app-codemirror{
  border-radius: 6px;
  height: 500px;
  overflow: hidden;
  .vue-codemirror{
    height: 100%;
   
  }
  ::v-deep .CodeMirror{
      height: 100%;
    }
}
</style>